<template>
  <div>
    <!--<div id="et1" style="height: 300px;width: 300px;display: inline-block"></div>-->
    <div id="et2" style="height: 800px;width: 800px;display: inline-block"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'EchartsTest1',
  mounted () {
    this.load1()
  },
  data () {
    return {
      data: {}
    }
  },
  methods: {
    // load () {
    //   let chart = echarts.init(document.getElementById('et1'), 'dark')
    //   let option = {
    //     title: {
    //       text: '折线图堆叠',
    //       link: 'https://www.baidu.com',
    //       textStyle: {color: '#00ff0e'}
    //     },
    //     legend: {},
    //     tooltip: {},
    //     dataset: {
    //       source: [
    //         ['product', '2015', '2016', '2017'],
    //         ['Matcha Latte', 43.3, 85.8, 93.7],
    //         ['Milk Tea', 83.1, 73.4, 55.1],
    //         ['Cheese Cocoa', 86.4, 65.2, 82.5],
    //         ['Walnut Brownie', 72.4, 53.9, 39.1]
    //       ]
    //     },
    //     xAxis: {type: 'category'},
    //     yAxis: {},
    //     // Declare several bar series, each will be mapped
    //     // to a column of dataset.source by default.
    //     series: [
    //       {type: 'bar'},
    //       {type: 'bar'},
    //       {type: 'bar'}
    //     ]
    //   }
    //   chart.setOption(option)
    // },
    load1 () {
      let chart = echarts.init(document.getElementById('et2'), 'dark')
      this.$ajax('/data/asset/data/flare.json').then(res => {
        this.data = res
      }).catch(e => {
        console.log(e)
      })
      let option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',

            data: [this.data],

            left: '2%',
            right: '2%',
            top: '8%',
            bottom: '20%',

            symbol: 'emptyCircle',

            orient: 'vertical',

            expandAndCollapse: true,

            label: {
              position: 'top',
              rotate: -90,
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9
            },

            leaves: {
              label: {
                position: 'bottom',
                rotate: -90,
                verticalAlign: 'middle',
                align: 'left'
              }
            },

            animationDurationUpdate: 750
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
